/* --------- bg color --------- */

@blue: #1e9fff; // tech-bgc
@black: #333; // nav
@lightBlack: #666; // nav
@titleBlack: #101010; // nav
@mint: #5fb878; // isSelected
@orange: #fd7418; // notice
@red: #ff5722; // awesome
@blue-1: #01aaed; // text、link
@bar: #2f4056; // footer、siderbar

/* --------- grey series --------- */

@greydark: #999999;
@grey: #c2c2c2;
@grey-1: #d2d2d2;
@grey-2: #d6d6d6;
@grey-3: #e2e2e2;
@grey-4: #eeeeee;
@grey-5: #f2f2f2;
@grey-6: #f0f0f0;

/* --------- ellipsis --------- */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------- flex --------- */

.flex(@jc:center,@ai:center) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
}

/* --------- padding --------- */
.pd(@a,@b,@c,@d) {
  padding: @arguments;
}

/* --------- margin --------- */
.mar(@a,@b,@c,@d) {
  margin: @arguments;
}

/* --------- position --------- */

.pr() {
  position: relative;
}

.pa() {
  position: absolute;
}

.pcc(@l,@t,@style:absolute) {
  position: @style;
  top: 50%;
  left: 50%;
  margin-left: -@l / 2;
  margin-top: -@t / 2;
}
/* --------- width-height --------- */

.wh(@w:auto,@h:auto) {
  width: @w;
  height: @h;
}

.lh(@h:1) {
  line-height: @h;
}

/* --------- font --------- */

.font(@fz:14px,@color:#333,@align:left) {
  font-size: @fz;
  color: @color;
  text-align: @align;
  .lh();
}

/* --------- bg --------- */

.bg(@color:@grey-3) {
  background: @color;
}

/* --------- br --------- */

.br(@br:2px) {
  border-radius: @br;
}

/* --------- button --------- */

.btn-lg {
}

.btn-md {
}

.btn-sm {
}
